*,*::before,*::after{
    box-sizing: border-box;
}

.grid-item{
    background-color: hotpink;
    border: 5px solid mediumaquamarine;
    font-size:25px ;
}

.grid-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-rows: 200px 150px; */
    grid-template-rows: minmax(150px, auto);
    grid-auto-rows: 150px;
    grid-column-gap: 20px;
    grid-row-gap: 20px;

    /* grid-template-areas:
    "a a a"
    "b c c" 
    "b c c"
    "d d d"; */
    
}


.grid-item-1{
    /* grid-area: a; */
    grid-column:span 2;
}
.grid-item-2{
    /* grid-area: b; */
    grid-row: span 2;
}
.grid-item-3{
    /* grid-area: c; */
    grid-row: span 2;
}
.grid-item-4{
    /* grid-area: d; */
    grid-column: span 2;
}